<template>
  <div class="dialog-form">
    <el-form ref="couponRef" :model="form" :rules="rules" label-width="110px">
      <el-form-item label="优惠券名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入优惠券名称" />
      </el-form-item>
      <el-form-item label="优惠券类型" prop="types">
        <el-select v-model="form.types" placeholder="请选择" @change="handleTypeChange">
          <el-option
            v-for="item in activity_coupon_type"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item 
        v-if="form.types" 
        :label="form.types == 1 ? '储值金额' : form.types == 2 ? '消费金额' : '购买金额'" 
        prop="sillPrice">
        <el-input-number v-model="form.sillPrice" :min="0.01" :precision="2" />
      </el-form-item>
      <el-form-item v-if="form.types && form.types != 3" label="优惠金额" prop="discountPrice">
        <el-input-number v-model="form.discountPrice" :min="0.01" :precision="2" />
      </el-form-item>
      <el-form-item label="有效期" prop="effectDate">
        <el-date-picker
          v-model="form.effectDate"
          :teleported="false"
          type="datetimerange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          @change="confirmDate"
          :disabled-date="handleDisabledDate"
        />
      </el-form-item>
      <el-form-item label="发放数量" prop="grantNum">
        <el-input-number v-model="form.grantNum" :min="1" :precision="0" />
      </el-form-item>
      <!-- <el-form-item label="个人限领数量" prop="limitNum">
        <el-input-number v-model="form.limitNum" :min="1" :precision="0" />
      </el-form-item> -->
    </el-form>
    <div class="dialog-footer">
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onConfirm">确认</el-button>
    </div>
  </div>
</template>

<script setup>
import { getCouponsDiscount, addCouponsDiscount, updateCouponsDiscount } from "@/api/activity/coupon"
import Big from 'big.js'
const { proxy } = getCurrentInstance()
const { activity_coupon_type, activity_coupon_status } = proxy.useDict('activity_coupon_type', 'activity_coupon_status')

const emits = defineEmits(['cancel', 'confirm'])

const couponRef = ref()
const effectDate = ref('')
const form = ref({
  id: null,
  name: null,
  types: null,
  sillPrice: null,
  discountPrice: null,
  grantNum: null,
  limitNum: null,
  effectDate: null,
  startTime: null,
  endTime: null
})

const checkAmount = (rule, value, callback) => {
  if (!value) {
    const tip = form.value.types == 1 ? '请输入储值金额' : form.value.types == 2 ? '请输入消费金额' :'请输入购买金额'
    callback(new Error(tip))
  } else {
    callback()
  }
}

const rules = {
  name: [
    { required: true, message: "请输入优惠券名称", trigger: "blur" }
  ],
  types: [
    { required: true, message: "请选择优惠券类型", trigger: "blur" }
  ],
  sillPrice: [
    { required: true, validator: checkAmount, trigger: "blur" }
  ],
  discountPrice: [
    { required: true, message: "请输入优惠金额", trigger: "blur" }
  ],
  effectDate: [
    { required: true, message: "请选择有效期", trigger: "blur" }
  ],
  grantNum: [
    { required: true, message: "请输入发放数量", trigger: "blur" }
  ],
  limitNum: [
    { required: true, message: "请输入个人限领数量", trigger: "blur" }
  ]
}

const pageInit = (id) => {
  getCouponsDiscount(id).then(response => {
    form.value = response.data
    form.value.types = String(form.value.types)
    form.value.sillPrice = new Big(form.value.sillPrice).div(new Big(100)).toNumber()
    form.value.discountPrice = new Big(form.value.discountPrice).div(new Big(100)).toNumber()
    form.value.effectDate = [form.value.startTime, form.value.endTime]
  })
}

const handleTypeChange = () => {
  form.value.sillPrice = null
  form.value.discountPrice = null
}

const confirmDate = (e) => {
  if (e && e.length) {
    form.value.startTime = e[0]
    form.value.endTime = e[1]
  } else {
    form.value.startTime = null
    form.value.endTime = null
  }
}

const handleDisabledDate = (date) => {
  date = proxy.parseTime(date, '{y}-{m}-{d}')
  const currentDate = proxy.parseTime(new Date(), '{y}-{m}-{d}')
  return date < currentDate
}

const onCancel = () => {
  emits('cancel')
}

const onConfirm = () => {
  couponRef.value.validate(valid => {
    if (valid) {
      const params = {
        id: form.value.id,
        name: form.value.name,
        types: form.value.types,
        sillPrice: form.value.sillPrice * 100,
        discountPrice: form.value.discountPrice * 100,
        grantNum: form.value.grantNum,
        limitNum: form.value.limitNum,
        startTime: form.value.startTime,
        endTime: form.value.endTime
      }
      if (form.value.id) {
        updateCouponsDiscount(params).then(response => {
          proxy.$modal.msgSuccess("修改成功")
          emits('confirm')
        })
      } else {
        addCouponsDiscount(params).then(response => {
          proxy.$modal.msgSuccess("添加成功")
          emits('confirm')
        })
      }
    }
  })
}

defineExpose({
  pageInit
})

</script>

<style lang="scss" scoped>

</style>